$(function () {
  // alert(666);

  // 获取所有的文章类别
  getCategoryList();
  function getCategoryList() {
    // ajax 请求获取所有文章类别
    $.ajax({
      method: "GET",
      url: BigNew.category_list,
      success: (res) => {
        console.log(res);
        // 3.0 调用模板引擎
        const htmlStr = template("cateItem", { list: res.data });
        $("tbody").html(htmlStr);
      },
    });
  }

  // 新增分类
  $("#addBtn").click(() => {
    // 获取用户输入的值
    const name = $("#name").val().trim();
    const slug = $("#slug").val().trim();
    // console.log(name, slug);
    // 安全判断 值为空，提示不能为空
    if (name === "" || slug === "") {
      return alert("输入的内容不能为空，请重新输入！");
    }

    // ajax请求 新增类别到服务器
    $.ajax({
      method: "POST",
      url: BigNew.category_add,
      data: { name, slug },
      success: (res) => {
        console.log(res);
        // 新增完成后，重新获取一下文章类别
        getCategoryList();

        // 隐藏模态框
        $("#myModal").modal("hide");

        // 1.0 清空用户输入的内容
        /* $("#name").val("");
        $("#slug").val(""); */
        // 2.0
        document.querySelector("form").reset();
      },
      error: () => {
        alert("您输入的name或slug已存在，请重新输入！");
      },
    });
  });

  // 新增分类 和 编辑按钮 共用一个模态框
  // 通过分支判断，处理模态框显示的两种情况
  // 显示或隐藏 新增/编辑 按钮
  $("#myModal").on("show.bs.modal", function (e) {
    // console.log($(e.relatedTarget));
    // 获取点击的按钮的文本
    const targetText = $(e.relatedTarget).text().trim();
    // console.log(targetText);
    if (targetText === "新增分类") {
      // 显示新增按钮，隐藏编辑按钮
      $("#addBtn").show(); // 显示
      $("#editBtn").hide(); // 隐藏
      // 清空输入框的值
      $("#name").val("");
      $("#slug").val("");
    } else if (targetText === "编辑") {
      // 隐藏新增按钮，显示编辑按钮
      $("#addBtn").hide(); // 隐藏
      $("#editBtn").show(); // 显示

      // 获取表格对应的name和slug 的文本
      const name = $(e.relatedTarget).parents("tr").children().eq(0).text();
      const slug = $(e.relatedTarget).parents("tr").children().eq(1).text();
      // console.log(name, slug);
      // 把获取的文本添加到模态框中
      $("#name").val(name);
      $("#slug").val(slug);

      // 获取表格中编辑按钮的id
      const id = $(e.relatedTarget).attr("data-id");
      // console.log(id);
      // 模态框添加id
      $("#editBtn").attr("data-id", id);
    }
  });

  // 模态框 编辑
  $("#editBtn").click(function () {
    const id = $(this).attr("data-id");
    const name = $("#name").val().trim();
    const slug = $("#slug").val().trim();
    // console.log(id, name, slug);

    // 判断，不能为空
    if (name == "" || slug == "") {
      return alert("输入不能为空，请重新输入！");
    }

    // ajax请求 编辑文章类别
    $.ajax({
      method: "POST",
      url: BigNew.category_edit,
      data: { id, name, slug },
      success: (res) => {
        console.log(res);
        if (res.code === 200) {
          // 重新获取所有文章类别
          getCategoryList();
          // 隐藏模态框
          $("#myModal").modal("hide");
        } else if (res.code === 400) {
          alert("输入的有误，请重新输入！");
        }
      },
      error: () => {
        // console.log(666);
        alert("输入的有误，请重新输入！");
      },
    });
  });

  // 删除分类
  $("tbody").on("click", ".deleteBtn", function () {
    // console.log(666);
    const id = $(this).attr("data-id");
    // console.log(id);

    // ajax请求 删除文章类别
    $.ajax({
      method: "POST",
      url: BigNew.category_delete,
      data: { id },
      success: (res) => {
        console.log(res);
        // 获取最新的文章类别
        getCategoryList();
      },
    });
  });
});
